<template>
  <div>
    <div style="width:100%;height:500px" ref="chart"></div>
  </div>
</template>

<script>
export default {
  name: 'dftu',
  data () {
    return {
      list: [],
      xx: [],
      yy: []
    }
  },
  methods: {
    async initCharts () {
      const myChart = this.$echarts.init(this.$refs.chart)
      const { data } = await this.$axios.post('/listammeter')
      this.list = data.list
      console.log(data.list)
      var str = ''
      this.list.forEach(function (e) {
        str += e.month + ','
      })
      str = str.substring(0, str.length)
      this.xx = str.split(',')
      var s = ''
      this.list.forEach(function (e) {
        s += e.electricity + ','
      })
      s = s.substring(0, s.length)
      this.yy = s.split(',')
      // 绘制图表
      myChart.setOption({
        title: { text: '电费走势图' },
        tooltip: {},
        xAxis: {
          data: this.xx
        },
        yAxis: {},
        series: [{
          name: '电费',
          type: 'bar',
          data: this.yy
        }]
      })
    }
  },
  mounted () {
    this.initCharts()
  }
}
</script>

<style scoped>

</style>
